<template>
  <div>
    <div class="main" v-show="!isAdd">
      <div style="display: block;overflow: hidden;">
        <el-button type="primary" style="float: left" @click="toAddBanner">新增</el-button>
        <el-button type="primary" style="float: right;" @click="getList">搜索</el-button>
        <el-input style="float:right;display: inline-block;width: 200px" v-model="bannerName" placeholder="请输入Banner名称"></el-input>
      </div>
      <el-table
        :data="list"
        border
        style="width: 100%;margin-top: 20px">
        <el-table-column
          prop="img"
          label="Banner">
          <template slot-scope="scope">
            <img :src="scope.row.img" width="80" height="60" class="head_pic"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="bannerName"
          label="Banner名称">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
          <template slot-scope="scope">
            {{bannerType_map[scope.row.status].text}}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <span v-show="scope.row.status == 1" @click="changeBannerStatus(scope.row,2)">{{$t('action.offShelf')}}</span>
            <span v-show="scope.row.status == 2" @click="changeBannerStatus(scope.row,1)">{{$t('action.onShelf')}}</span>
            <span @click="toAddBanner(scope.row)">{{$t('action.edit')}}</span>
            <span @click="toDel(scope.row)">{{$t('action.delete')}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float: right;margin: 10px 0"
        background
        pageZize="10"
        @current-change="getList"
        layout="prev, pager, next"
        :total="count">
      </el-pagination>
    </div>
    <AddBanner v-if="isAdd" @closePop="close"></AddBanner>
  </div>
</template>

<script>
  import AddBanner from "./components/AddBanner";
  import {mapState} from "vuex";

  export default {
    name: "BannerIndex",
    components: {AddBanner},
    data() {
      return {
        isAdd: false,
        bannerName: '',
        count:0,
        list: []
      }
    },
    computed: {
      ...mapState({
        bannerType_map: state => state.app.enumData.bannerType_map
      })
    },
    created() {
      this.getList();
    },
    methods: {
      getList(current) {
        console.log(current)
        this.$api.mall.getBannerList({bannerName: this.bannerName + ':',pageIndex:0,pageSize:10}).then(
          res => {
            this.count = res.data.count;
            this.list = res.data.list;
          }
        )
      },
      toAddBanner() {
        this.isAdd = true
      },
      changeBannerStatus(model,type) {
        console.log(model)
        var str = type == 2?"下架":"上架";
        this.$confirm('此操作将'+ str +'该Banner, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          model.status = type;
          this.$message({
            type: 'success',
            message: str + '成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消' + str
          });
        });
      },
      toDel() {
        this.$confirm('此操作将永久删除该Banner, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      close(){
        this.isAdd = false;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 5px;
    overflow: hidden;
  }

  .el-table {
    table-layout: fixed;
    margin-top: 30px;
  }

  .cell {
    span {
      display: inline-block;
      margin-right: 8px;
      font-size: 12px;
      min-width: 50px;
      box-sizing: border-box;
      text-align: center;
      padding: 2px 10px;
      background-color: #f0f0f0;
      border-radius: 3px;
      cursor: pointer;
    }

    span.btn-normal {
      color: #2a75ed;
    }

    span.btn-danger {
      color: #911b12;
    }
  }
</style>
